<template>
	<view>
		<u-sticky bgColor='#f8f8f8'>
			<view class="" style="padding: 30rpx;">
				<view class="con__all">
					<view class="con__all__title">
						总评分
					</view>
					<view class="u-flex u-flex-y-center" style="margin-left: 39rpx;">
						<!-- <image src="/static/goods/qx.png" v-for="(item,index) in 4" :key="index" class="con__all__xin" mode=""></image>
						<image src="/static/goods/banxin.png" class="con__all__xin" mode=""></image> -->
						<u-rate count="5" v-model="avgScore" :minCount='1' allowHalf size="24rpx" activeColor="#fff"
							inactiveColor="#ffffff" inactiveIcon='star-fill'></u-rate>
						<view class="con__all__num">
							{{avgScore}}
						</view>
					</view>
					<view class="u-flex u-flex-y-center" style="margin-left: 39rpx;margin-top: 18rpx;">
						<image :src="commentList[0].avatar" :style="{zIndex:commentList.length}" class="con__all__tx"
							mode="aspectFill" v-if="commentList.length>0"></image>
						<image :src="commentList[1].avatar" :style="{zIndex:commentList.length-1}" class="con__all__tx"
							mode="aspectFill" v-if="commentList.length>1"></image>
						<image :src="commentList[2].avatar" :style="{zIndex:commentList.length-2}" class="con__all__tx"
							mode="aspectFill" v-if="commentList.length>2"></image>
						<view class="con__all__text">
							共有{{commentList.length}}评价该商品
						</view>
					</view>
					<image src="/static/goods/bgicon.png" class="con__all__bg" mode=""></image>
				</view>
			</view>
		</u-sticky>
		<view class="con">
			<view class="con__item" v-for="(item,index) in commentList" :key="index">
				<view class="u-flex u-flex-y-center">
					<image :src="item.avatar" class="con__item__tx" mode="aspectFill"></image>
					<view class="" style="flex: 1;">
						<view class="con__item__name">
							{{item.username}}
						</view>
						<view class="con__item__time">
							{{formatTimestamp(item.createtime)}}
						</view>
					</view>
					<view class="u-flex u-flex-y-center">
						<!-- <image src="/static/goods/qx.png" class="con__item__xin" mode=""></image> -->
						<u-rate count="5" v-model="item.score" :minCount='1' allowHalf size="24rpx" activeColor="#fff"
							inactiveColor="#ffffff" inactiveIcon='star-fill'></u-rate>
						<view class="con__item__num" style="margin-left: 10rpx;">
							{{item.score}}
						</view>
					</view>
				</view>
				<view class="con__item__cont">
					{{item.content}}
				</view>
				<view class="u-flex u-flex-y-center">
					<view class="con__item__ll" style="opacity: 0;">
						21次浏览
					</view>
					<!-- <image src="/static/goods/good.png" class="con__item__dz" mode=""></image>
					<view class="con__item__dznum">
						{{item.good || 0}}
					</view> -->
					<u-icon name="heart" color="#000000" size="20" v-if="!item.is_ok" @click="comOk(item)"></u-icon>
					<u-icon name="heart-fill" color="#ff4d30" size="20" v-else @click="comOk(item)"></u-icon>
					<view class="con__item__dznum" @click="comOk(item)" style="margin-left: 4rpx;">
						{{item.good || 0}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsCommentIndex
	} from "@/request/api/order.js"
	import {

		goodsCommentOk
	} from "@/request/api/goods.js"
	export default {
		data() {
			return {
				id: null,
				commentList: [],
				avgScore: 0,
				urls: [
					'/static/logo.png',
					'/static/logo.png',
					'/static/logo.png',
				]
			};
		},
		onLoad(opt) {
			this.id = opt.id;

			goodsCommentIndex({
				id: this.id
			}).then(res => {
				this.commentList = res.data.list;
				this.avgScore = res.data.avgScore;
			})

		},
		methods: {
			comOk(item) {
				goodsCommentOk({
					id: item.id
				}).then(res1 => {
					goodsCommentIndex({
						id: this.id
					}).then(res => {
						console.log(res)
						this.commentList = res.data.list;
					})
				})
			},
			formatTimestamp(timestamp) {
				// 创建 Date 对象
				const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
				// 获取年份、月份、日期、小时、分钟、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				// 返回格式化的日期时间字符串
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 0 30rpx 30rpx;

		&__all {
			height: 220rpx;
			background: #FDEEEC;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 1rpx solid #FFFFFF;
			position: relative;

			&__title {
				font-family: AlimamaShuHeiTi;
				font-weight: bold;
				font-size: 36rpx;
				color: #1E1E1E;
				line-height: 36rpx;
				padding: 42rpx 0 20rpx 38rpx;
			}

			&__xin {
				width: 36rpx;
				height: 33rpx;
				margin-right: 2rpx;
			}

			&__num {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 32rpx;
				color: #000001;
				line-height: 32rpx;
				margin-left: 5rpx;
				margin-top: 10rpx;
				vertical-align: baseline;
			}

			&__text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #888A8C;
				line-height: 24rpx;
				margin-left: 18rpx;
			}

			&__tx {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				margin-right: -10rpx;
			}

			&__bg {
				width: 130rpx;
				height: 130rpx;
				position: absolute;
				top: 45rpx;
				right: 42rpx;
			}
		}

		&__item {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 26rpx;
			padding: 33rpx 20rpx 36rpx;

			&__tx {
				width: 63rpx;
				height: 65rpx;
				background: #888A8C;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
			}

			&__time {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 25rpx;
				color: #929292;
				line-height: 25rpx;
				margin-top: 20rpx;
			}

			&__xin {
				width: 34rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			&__num {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 32rpx;
				color: #000001;
				line-height: 32rpx;
				margin-top: 10rpx;
			}

			&__cont {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 40rpx;
				margin: 30rpx 0;
			}

			&__ll {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 24rpx;
				color: #929292;
				line-height: 24rpx;
				flex: 1;
				margin-top: 10rpx;
			}

			&__dz {
				width: 33rpx;
				height: 31rpx;
				margin-right: 10rpx;
			}

			&__dznum {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>